<template>
  <view class="sv-uv-drop-down">
    <uv-drop-down ref="dropDownRef" sign="ddsign" :defaultValue="defaultDrop" @click="selectDown">
      <uv-drop-down-item
        name="lib"
        :label="dropItem('lib').label"
        :value="dropItem('lib').value"
        type="2"
      ></uv-drop-down-item>
      <uv-drop-down-item
        name="unit"
        :label="dropItem('unit').label"
        :value="dropItem('unit').value"
        type="2"
      ></uv-drop-down-item>
      <uv-drop-down-item
        name="edit"
        :label="dropItem('edit').label"
        :value="dropItem('edit').value"
        type="1"
      ></uv-drop-down-item>
    </uv-drop-down>
    <uv-drop-down-popup
      sign="ddsign"
      click-overlay-on-close
      :currentDropItem="curDropItem"
      @clickItem="clickItem"
      @popupChange="changeDropDown"
    ></uv-drop-down-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

/**
 * 下拉栏
 */
const dropItem = computed(() => {
  return (name) => {
    const result = {}
    const find = curResult.value.find((item) => item.name === name)
    if (find) {
      result.label = find.label
      result.value = find.value
    } else {
      result.label = dropPanel.value[name].label
      result.value = dropPanel.value[name].value
    }
    return result
  }
})

const curResult = ref([
  { name: 'lib', label: '题库', value: '' },
  { name: 'unit', label: '单元', value: '' }
])

// 获取当前下拉筛选项
const curDropItem = computed(() => {
  return dropPanel.value[curDrop.value]
})

const defaultDrop = ref(['', '', 0])

const curDrop = ref('lib')

const dropPanel = ref({
  lib: {
    label: '题库',
    value: '',
    activeIndex: 0,
    child: [
      {
        label: '全部',
        value: ''
      },
      {
        label: '题库1',
        value: 'tk1'
      },
      {
        label: '题库2',
        value: 'tk2'
      }
    ]
  },
  unit: {
    label: '单元',
    value: '',
    activeIndex: 0,
    child: [
      {
        label: '全部',
        value: ''
      },
      {
        label: '单元1',
        value: 'unit-1'
      },
      {
        label: '单元2',
        value: 'unit-2'
      }
    ]
  },
  edit: {
    label: '编辑',
    value: 0,
    activeIndex: 0
  }
})

/**
 * 点击菜单回调处理
 * @param {Object} item 选中项 { label,value }
 */
function clickItem(e) {
  let { label, value } = e
  // 更新参数
  dataParams.value[curDrop.value] = value
  console.log('==== clickItem :', dataParams.value)
  // 更新样式
  const findIndex = curResult.value.findIndex((item) => item.name == curDrop.value)
  if (defaultDrop.value.indexOf(value) > -1 && curDropItem.value.label) {
    label = curDropItem.value.label
  }
  // 已经存在筛选项
  if (findIndex > -1) {
    curResult.value[findIndex] = {
      name: curDrop.value,
      label,
      value
    }
  } else {
    curResult.value.push({
      name: curDrop.value,
      label,
      value
    })
  }
  curResult.value = curResult.value.filter((item) => defaultDrop.value.indexOf(item.value) == -1)
}

function changeDropDown(e) {
  console.log('changeDropDown：', e)
}

/**
 * 点击每个筛选项回调
 * @param {Object} e { name, active, type }
 */
function selectDown(e) {
  console.log('==== selectDown :', e)
  const { name, type, active } = e
  curDrop.value = name
  if (type == 1) {
    if (active) {
      console.log('==== 编辑 :')
    } else {
      console.log('==== 取消编辑 :')
    }
  } else {
    const find = curResult.value.find((item) => item.name == curDrop.value)
    if (find) {
      const findIndex = curDropItem.value.child.findIndex(
        (item) => item.label == find.label && item.value == find.value
      )
      dropPanel.value[curDrop.value].activeIndex = findIndex
    } else {
      dropPanel.value[curDrop.value].activeIndex = 0
    }
  }
}
</script>

<style></style>
